// createRouter 创建路由实例的函数
// createWebHashHistory  创建哈希路由的函数

import store from '@/store'
import { h } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'

const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/home/index')
const CategoryIndex = () => import('@/views/category/index')
const CategorySub = () => import('@/views/category/sub')
const Goods = () => import('@/views/goods/index')
const Login = () => import('@/views/login/index')
const Cart = () => import('@/views/cart/index')
const LoginCallback = () => import('@/views/login/callback')
const Checkout = () => import('@/views/member/pay/checkout')
const Pay = () => import('@/views/member/pay/index')
const PayCallback = () => import('@/views/member/pay/callback')
const MemberLayout = () => import('@/views/member/Layout')
const MemberHome = () => import('@/views/member/home/index')
const MemberOrder = () => import('@/views/member/order/index')
const MemberOrderDetail = () => import('@/views/member/order/detail')
// 配置路由，路由的映射关系，路径与组件
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '', component: Home },
      { path: 'category/:id', component: CategoryIndex },
      { path: 'category/sub/:id', component: CategorySub },
      { path: 'product/:id', component: Goods },
      { path: 'cart', component: Cart },
      { path: 'member/checkout', component: Checkout },
      { path: 'member/pay', component: Pay },
      { path: 'member/pay/callback', component: PayCallback },
      {
        path: 'member',
        component: MemberLayout,
        children: [
          { path: '', component: MemberHome },
          // 💥💥💥注意：vue3.0 router-link-active 加不上，路由路径包含 且 需要又路由嵌套关系。
          {
            path: '/member/order',
            // vue3.0 需要有嵌套关系才能模糊匹配
            component: { render: () => h(<RouterView />) },
            children: [
              { path: '', component: MemberOrder },
              { path: ':id', component: MemberOrderDetail }
            ]
          }
          // { path: 'order', component: MemberOrder },
          // { path: 'order/:id', component: MemberOrderDetail }
        ]
      }
    ]
  },
  { path: '/login', component: Login },
  { path: '/login/callback', component: LoginCallback }
]

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // 路由进阶，滚动行为
  scrollBehavior (to, from, savedPosition) {
    // console.log(to.path)
    // console.log(savedPosition)
    // savedPosition vue3输出  {left: 0,top: 0}
    // savedPosition vue3输出  {x: 0,y: 0}
    // 💥💥开头为 /category/ 跳到顶部，其他不变
    if (to.path.startsWith('/category/') || to.path.startsWith('/product/')) {
      // top: 0,滚动到顶部,behavior: 'smooth'平滑滚动
      return { top: 0, behavior: 'smooth' }
    } else {
      return savedPosition
    }
  }
})

// 前置导航守卫
router.beforeEach((to, from) => {
  if (to.path.startsWith('/member') && !store.state.user.profile.token) {
    // 跳转去member开头的地址却没有登录
    // next('/login?redirectUrl=' + to.fullPath)
    return { path: '/login', query: { redirectUrl: to.fullPath } }
  }
})

// 导出路由实例
export default router
